<template>
  <div class="api-test">
    <h2>API测试组件</h2>
    <button @click="testConnection">测试连接</button>
    <button @click="fetchData">获取数据</button>
    <div v-if="response" class="response">
      <h3>响应结果:</h3>
      <pre>{{ response }}</pre>
    </div>
    <div v-if="error" class="error">
      <h3>错误信息:</h3>
      <pre>{{ error }}</pre>
    </div>
  </div>
</template>

<script>
import http from '../api/http'

export default {
  name: 'ApiTest',
  data() {
    return {
      response: null,
      error: null
    }
  },
  methods: {
    async testConnection() {
      this.response = null
      this.error = null
      try {
        const response = await http.get('/test')
        this.response = response.data
      } catch (err) {
        this.error = err.message
      }
    },
    async fetchData() {
      this.response = null
      this.error = null
      try {
        const response = await http.get('/data')
        this.response = JSON.stringify(response.data, null, 2)
      } catch (err) {
        this.error = err.message
      }
    }
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 20px 0;
}

button {
  margin: 10px 10px 10px 0;
  padding: 10px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #359c6d;
}

.response,
.error {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
}

.response {
  background-color: #f0f8ff;
  border: 1px solid #42b983;
}

.error {
  background-color: #fff0f0;
  border: 1px solid #f66;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>